{extend name="base"/}
{block name="css"}
<link rel="stylesheet" href="/static/backend/css/classgoods.css?t=9">
<style>
    .layui-body {
        position: absolute;
        left: 20px;
        right: 0;
        top: 20px;
        bottom: 0;
        z-index: 998;
        width: auto;
        overflow: hidden;
        overflow-y: auto;
        box-sizing: border-box;
    }
</style>
{/block}
{block name="content"}
<div class="secon" style="display: block;">
    <!--<div class="secon_top" style="width: 80%"><p class="off" id="off">关闭</p></div>-->
    <div class="opt_all">
        <div class="opt_list">
            <p>分类名称</p><input type="text" placeholder="请填写分类名称" name="cat_name" class="name_s">
        </div>
        <div class="opt_list">
            <p>上级分类</p>
            <div class="box_s" data-id="0">作为一级分类</div>
            <ul class="drop_down">
                <li data-id="0">作为一级分类</li>
                {volist name='selectOption' id='vo'}
                    <li data-id="{$vo.cat_id}">{$vo.cat_name}{if $vo.parent_id ==0}(作为一级分类){/if}</li>
                {/volist}
            </ul>	
        </div>
        <div class="opt_list">
            <p>导航显示</p>
            <input type="radio" id="male" name="is_show" value="1" checked="checked" class="yes" />
			<label for="male" class="box jj">是</label>
		    <input type="radio" id="female" name="is_show" value="0" class="no" />
		    <label for="female" class="box jj">否</label>
        </div>
        <div class="opt_list">
            <p>导航排序</p>
            <input type="text" placeholder="0" class="name_s" name="sort_order">
        </div>
        <div class="opt_list">
            <p>图片展示</p>
            <form name="form0" id="form0"  enctype="multipart/form-data">
                <div class="haha">
                    <div class="oimg">点击上传图片</div>
                    <input type="file" name="cat_thumb" id="file0" multiple="multiple" style="background: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0); border: none;" /><br><img src="/static/backend/image/zwtp.jpg" id="img0"   >
                </div>
            </form>
        </div>
    </div>   
    <button class="bti">提交</button>
</div>
{/block}
{block name="js"}
<script type="text/javascript" src="/static/backend/js/jquery.form.js"></script>
<script type="text/javascript" src="/static/backend/js/goodsCategory.js?t=8"></script>
<script type="text/javascript" src="/static/backend/layui/layui.js?t=9"></script>
<script type="text/javascript" src="/static/backend/layer/layer.js?t=9"></script>
<script>
    var a=0;
    $(".off").click(function(){
       $(".con_con" , parent.document).show();
        $(".jiazai" , parent.document).hide();
    });

    $(".box_s").click(function(){
        if(a==0){
            $(".drop_down").slideDown();
            a=1;
        }else{
            $(".drop_down").slideUp();
            a=0;
        }
    });
    $(".drop_down li").click(function(){
        var Oindex=$(this).index();
        var b=$(".drop_down li").eq(Oindex).html();
        var id = $(".drop_down li").eq(Oindex).attr('data-id');
        $(".box_s").html(b);
        $('.box_s').attr('data-id',id);
        $(".drop_down").slideUp();
        a=0;
    });

    $(".drop_down li").mouseover(function(){
        var Oindex=$(this).index();
        $(this).css({"color":"#000"});
        $(this).css({"background":"#fff"});
    });
    $(".drop_down li").mouseout(function(){
        var Oindex=$(this).index();
        $(this).css({"color":"#fff"});
        $(this).css({"background":"rgba(0,0,0,0.6)"});
    });



    $(".box_s1").click(function(){
        if(a==0){
            $(".drop_down1").slideDown();
            a=1;
        }else{
            $(".drop_down1").slideUp();
            a=0;
        }
    });
    $(".drop_down1 li").click(function(){
        var Oindex=$(this).index();
        var b=$(".drop_down1 li").eq(Oindex).html();
        var id = $(".drop_down1 li").eq(Oindex).attr('data-id');
        $(".box_s1").html(b);
        $('.box_s1').attr('data-id',id);
        $(".drop_down1").slideUp();
        a=0;
    });

    $(".drop_down1 li").mouseover(function(){
        var Oindex=$(this).index();
        $(this).css({"color":"#000"});
        $(this).css({"background":"#fff"});
    });
    $(".drop_down1 li").mouseout(function(){
        var Oindex=$(this).index();
        $(this).css({"color":"#fff"});
        $(this).css({"background":"rgba(0,0,0,0.6)"});
    });


    $("#file0").change(function(){
        $("#form0").ajaxSubmit({
            //alert("bbbbb");return false;
            url: '/backend/goods_category/uploads',
            type: "Post",
            dataType : 'json',
            success: function (data) {
                console.log(data);
                //alert(data);
                //将返回的数据加载到隐藏域
                $('#img0').attr('src',data);
            }
        });
    });

    function getObjectURL(file) {
        var url = null ; 
        if (window.createObjectURL!=undefined) {
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) {
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) {
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }

    $("#form0 img").css({"width":"200px"});
    $("#form0 img").css({"heigth":"200px"});
    $("#form0 img").css({"marginLeft":"200px"});
</script>
{/block}
